<template>
  <CarouselImage></CarouselImage>
  <!-- 分类类别 -->
  <TypeList :dataList="typeList" @choose-menu="handlerChoose"></TypeList>

  <el-row style="margin-top: 50px; background: #fff; padding: 10px">
    <el-col :span="15">
      <ContentListVue :dataList="blogList"></ContentListVue>
    </el-col>
    <el-col :span="8" style="margin-left: 20px">
      <MRank :contentList="contentRank" :rank="rank"></MRank>
    </el-col>
  </el-row>
  <el-backtop :right="20" :bottom="100" />
</template>

<script setup>
import CarouselImage from '@/components/client/CarouselImage.vue'
import ContentListVue from '@/components/client/ContentList.vue'
import TypeList from '@/components/client/TypeList.vue'
import request from '@/util/request'
import { ElNotification } from 'element-plus'
import { onMounted, ref } from 'vue'
import MRank from '@/components/client/rank/MRank.vue'

const typeList = ref([])
const blogList = ref([])
const rank = ref([])
const contentRank = ref([])

const getType = () => {
  request
    .get('/user/type/list')
    .then((res) => {
      console.log('获取成功：', res)
      typeList.value = res.data
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}
const pageSize = ref(0)

const getBlog = () => {
  request
    .get(`/user/blog/all?size=${pageSize.value}`)
    .then((res) => {
      console.log('获取成功：', res)
      blogList.value = res.data.records
      pageSize.value += res.data.records.length
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const getContent = () => {
  request
    .get('/rank/contentRank')
    .then((res) => {
      console.log('文章', res.data)

      contentRank.value = res.data
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const handlerChoose = (id) => {
  request
    .get(`/user/content/type?id=${id}`)
    .then((res) => {
      console.log('获取成功：', res)
      blogList.value = res.data
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const getRank = () => {
  request
    .get('/rank/list')
    .then((res) => {
      console.log('获取排行榜数据成功（包括用户数据）：', res)
      rank.value = res.data
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

onMounted(() => {
  getType()
  getBlog()
  getRank()
  getContent()

  // setTimeout(() => {
  //   showList.value = true
  // }, 1000)
})
</script>

<style scoped>
body {
  background: #eee;
}
</style>
